<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>地图</title>
  </head>
  <body>
    <div id="main" style="width: 1000px; height: 800px"></div>
    <!-- <script src="./lib/echarts.min.js"></script> -->
    <script src="./node_modules/echarts/dist/echarts.js"></script>
    <script src="https://www.makeapie.cn/dep/echarts/map/js/china.js"></script>
    <script src="./lib/vintage.js"></script>

    <script>
      const myChart = echarts.init(document.querySelector('#main'));
      const provinces = [
        '北京',
        '天津',
        '上海',
        '重庆',
        '河北',
        '河南',
        '云南',
        '辽宁',
        '黑龙江',
        '湖南',
        '安徽',
        '山东',
        '新疆',
        '江苏',
        '浙江',
        '江西',
        '湖北',
        '广西',
        '甘肃',
        '山西',
        '内蒙古',
        '陕西',
        '吉林',
        '福建',
        '贵州',
        '广东',
        '青海',
        '西藏',
        '四川',
        '宁夏',
        '海南',
        '台湾',
        '香港',
        '澳门',
      ];

      const option = {
        title: {
          text: '籍贯分布',
          top: 10,
          left: 10,
          textStyle: {
            fontSize: 16,
          },
        },
        visualMap: {
          min: 0,
          max: 1000,
          left: 'left',
          top: 'bottom',
          text: ['高', '低'],
          calculable: false,
          orient: 'horizontal',
          inRange: {
            color: ['#e0ffff', '#006edd'],
            symbolSize: [30, 100],
          },
        },
        tooltip: {
          padding: 8,
          enterable: true,
          transitionDuration: 1,
          textStyle: {
            color: '#fff',
            decoration: 'none',
          },
        },
        series: [
          {
            name: '学员',
            type: 'map',
            mapType: 'china',
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
              },
              emphasis: {
                label: {
                  show: true,
                },
              },
            },
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: '#fff',
                  fontSize: 12,
                },
              },
              emphasis: {
                color: '#fff',
              },
            },
            data: provinces.map((province) => ({
              name: province,
              value: Math.round(Math.random() * 1000),
              // tipData: [
              //   Math.round(Math.random() * 1000),
              //   Math.round(Math.random() * 1000),
              // ],
            })),
          },
        ],
      };

      myChart.setOption(option);
      // 更新高亮显示的函数
      function highlightRandomProvince() {
        const randomProvinceIndex = Math.floor(
          Math.random() * provinces.length
        );
        const randomProvince = provinces[randomProvinceIndex];

        // 取消之前的高亮
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
        });

        // 高亮显示随机选择的省份
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          name: randomProvince,
        });

        // 显示提示框
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: randomProvinceIndex,
        });
      }

      let highlightInterval;

      // 开始随机高亮显示
      function startHighlighting() {
        if (highlightInterval) {
          clearInterval(highlightInterval);
        }
        highlightInterval = setInterval(highlightRandomProvince, 1000);
      }

      // 停止随机高亮显示
      function stopHighlighting() {
        if (highlightInterval) {
          clearInterval(highlightInterval);
          highlightInterval = null;
        }
        // 取消之前的高亮
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
        });
      }

      // 监听鼠标移入事件
      myChart.on('mouseover', (params) => {
        if (params.componentType === 'series') {
          stopHighlighting();
          // 取消之前的高亮
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
          });

          // 高亮显示当前选中的省份
          myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            name: params.name,
          });

          // 显示提示框
          myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            name: params.name,
          });
        }
      });

      // 监听鼠标移出事件
      myChart.on('mouseout', () => {
        startHighlighting();
      });

      // 初始化时开始随机高亮显示
      startHighlighting();
    </script>
  </body>
</html>
